<template>
  <div class="ui-demo">
    <!-- PC Layout -->
    <div class="pc-layout">
      <h2>PC Header</h2>
      <el-main>
        <ElButton type="primary">PC Primary</ElButton>
      </el-main>
      <el-footer>PC Footer</el-footer>
    </div>

    <!-- iPad Layout -->
    <div class="ipad-layout">
      <nav-bar title="iPad Header" />
      <div class="ipad-content">
        <h2>iPad Layout</h2>
        <VanButton type="danger">iPad 危险按钮</VanButton>
        <VanButton type="warning">iPad 警告按钮</VanButton>
      </div>
    </div>

    <!-- Mobile Layout -->
    <div class="mobile-layout">
      <nav-bar title="Mobile Header" />
      <div class="mobile-content">
        <h2>Mobile Layout</h2>
        <van-button type="primary">Mobile 主要按钮</van-button>
        <van-button type="success">Mobile 成功按钮</van-button>
        <van-button type="default">Mobile 默认按钮</van-button>


      </div>
      <tabbar>
        <tabbar-item icon="home">Home</tabbar-item>
        <tabbar-item icon="search">Search</tabbar-item>
      </tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElHeader, ElMain, ElFooter, ElButton } from 'element-plus';
import { NavBar, Tabbar, TabbarItem, Button as VanButton } from 'vant';
import { updateLayout } from '../utils/layoutUtils';

const isPC = ref(false);
const isIPad = ref(false);

onMounted(() => {
  updateLayout(isPC, isIPad);
  window.addEventListener('resize', () => updateLayout(isPC, isIPad));
});

</script>

<style scoped>
.pc-layout {
  height: 300px;
  background-color: #921414;
}

.ipad-layout, .mobile-layout {
  height: 300px;
  background-color: #2d90a6;
}

@media (min-width: 1024px) {
  .pc-layout {
    display: block;
  }
  .ipad-layout, .mobile-layout {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ipad-layout {
    display: block;
  }
  .pc-layout, .mobile-layout {
    display: none;
  }
}

@media (max-width: 767px) {
  .mobile-layout {
    display: block;
  }
  .pc-layout, .ipad-layout {
    display: none;
  }
}
</style>